import React, { useState, useEffect, useRef } from 'react'
import { connect } from 'react-redux'
import QueueAnim from 'rc-queue-anim'
import { requestChartsForClassifySales } from '../../../api/statistic'
import * as echarts from 'echarts'

const itemStyle = {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#83bff6' },
        { offset: 0.5, color: '#188df0' },
        { offset: 1, color: '#188df0' }
    ])
}

const emphasis = {
    itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
        ])
    }
}

function Classify (props) {
    const [chart, setchart] = useState()
    const init = useRef(false)

    useEffect(() => {
        function chartRender (config) {
            const chartDom = document.getElementById('main')
            if (!init.current) {
                setchart(echarts.init(chartDom))
                init.current = true
            }
            chart && chart.clear()
            chart && chart.setOption(config)
        }

        requestChartsForClassifySales().then(res => {
            res.data.series[0].itemStyle = itemStyle
            res.data.series[0].emphasis = emphasis
            chartRender(res.data)
        })
    }, [chart, init])

    return (<QueueAnim className="demo-content" key="demo">
        {
            props.show ? <div className="demo-tbody" key="a">
                <div id="main" style={{
                    height: window.innerHeight - 200,
                    paddingTop: '20px',
                    boxSizing: 'border-box'
                }}>

                </div>
            </div> : null
        }
    </QueueAnim>)
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(Classify)
